<script setup>
import { onMounted, reactive, ref, watch } from "vue"
import { deleteTableDataApi, getTableDataApi, saveTableDataApi } from "@/api/purchase/order_detail"
import { ElMessage, ElMessageBox } from "element-plus"
import { usePagination } from "@/hooks/usePagination"
import { cloneDeep } from "lodash-es"
import { Table } from "vxe-table"

defineOptions({
  // 命名当前组件
  name: "OrderDetail"
})

const loading = ref(false)
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()

const status = reactive([
  { value: 0, label: '编写中' },
  { value: 1, label: '已确认' },
  { value: 2, label: '进行中' },
  { value: 3, label: '已完成' },
  { value: 10, label: '已取消' },
])

//#region 增
const DEFAULT_FORM_DATA = {
  order_id: 0,
  order_code: "",
  order_date: "",
  total_amount: 0,
  total_number: 0,
  order_status: 0,
  details: []
}

const DEFAULT_TABLE_DATA = {
  detail_id: 0,
  order_date: "",
  supplier_id: 0,
  supplier_title: "",
  supplier_code: "",
  product_id: 0,
  product_title: "",
  product_code: "",
  spec_id: 0,
  spec_code: "",
  spec_name: "",
  model_name: "",
  quantity: 0,
  unit_price: 0,
  total_price: 0,
  remark: "",
  username: ""
}

const formRef = ref(null)
const formData = ref(cloneDeep(DEFAULT_FORM_DATA))
const formRules = {
  order_date: [{ required: true, trigger: "blur", message: "采购日期不能为空" }],
}

const tableData = ref(cloneDeep(DEFAULT_TABLE_DATA))
const handleCreateOrUpdate = () => {
  formRef.value?.validate((valid, fields) => {
    if (!valid) return console.error("表单校验不通过", fields)
    loading.value = true
    saveTableDataApi(formData.value)
      .then(() => {
        ElMessage.success("操作成功")
        getTableData()
      })
      .finally(() => {
        loading.value = false
      })
  })
}
//#endregion

//#region 删
const handleDelete = (index) => {
  ElMessageBox.confirm(`正在删除信息，确认删除？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {

  })
}
//#endregion

//#region 改
const handleUpdate = (row) => {
  tableData.value = cloneDeep(row)
}
//#endregion

const getTableData = () => {
  loading.value = true
  getTableDataApi({
    order_id: formData.value.order_id
  })
    .then((data) => {
      console.log(data)
      formData.value = data
      if( formData.value .order_date == '' ){
        formData.value .order_date = new Date().toLocaleDateString()
      }
    })
}
</script>

<template>
  <div class="app-container">
    <el-card v-loading="loading" shadow="never">
      <el-form ref="formRef" :model="formData" :rules="formRules" :inline="true" label-position="left">

        <div class="search-wrapper" style="margin-bottom: 10px;">
          采购商品列表
        </div>
        <div class="table-wrapper">
          <el-table :data="formData.details" border>
            <el-table-column prop="product_title" label="商品名" align="center" />
            <el-table-column prop="spec_name" label="规格及型号" align="center" />
            <el-table-column prop="supplier_title" label="供货商" align="center" width="250" />
            <el-table-column prop="unit_price" label="单价" align="center" width="100" />
            <el-table-column prop="quantity" label="数量" align="center" width="100" />
            <el-table-column prop="total_price" label="总价" align="center" width="100" />
            <el-table-column prop="remarks" label="备注" align="center" />
            <el-table-column fixed="right" label="操作" width="150" align="center">
              <template #default="scope">
                <el-button type="primary" bg size="small" @click="handleUpdate(scope.row)">修改</el-button>
                <el-button type="danger" bg size="small" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="table-wrapper" style="background-color: #efefef;padding: 10px 10px 0 10px;">
          <el-form-item prop="title" label="商品名" required>
            <el-input v-model="tableData.product_title" placeholder="请输入名称" />
          </el-form-item>
          <el-form-item prop="supplier_code" label="规格及型号" required>
            <el-input v-model="tableData.supplier_id"
              :disabled="tableData.supplier_id !== 0 && tableData.supplier_code != ''" placeholder="请输入编号" />
          </el-form-item>
          <el-form-item prop="supplier_title" label="供货商" required>
            <el-input v-model="tableData.supplier_title" />
          </el-form-item>
          <el-form-item prop="unit_price" label="单价" required>
            <el-input v-model="tableData.unit_price" style="width: 90px;" />
          </el-form-item>
          <el-form-item prop="quantity" label="数量" required>
            <el-input v-model="tableData.quantity" style="width: 70px;"/>
          </el-form-item>
          <el-form-item prop="remarks" label="备注">
            <el-input v-model="tableData.remark" placeholder="请输入备注"  />
          </el-form-item>
          <el-form-item >
            <el-button type="danger" @click="handleCreateOrUpdate">插入商品</el-button>
          </el-form-item>
        </div>

        <div class="search-wrapper" style="margin-bottom: 20px;">
          采购单信息
        </div>
        <div class="search-wrapper" style="margin-bottom: 10px;">
          <el-form-item prop="order_date" label="日期：" required>
            <el-date-picker
              v-model="formData.order_date"
              type="date"
              :clearable="false"
              style="width: 140px;"
              format="YYYY-MM-DD"
              placeholder="选择日期"
            />
          </el-form-item>
          <el-form-item prop="order_code" label="编号：" required>
            <el-input v-model="formData.order_code" placeholder="编号为空会自动生成" />
          </el-form-item>
          <el-form-item prop="order_status" label="状态:" required>
            <el-select v-model="formData.order_status" style="width: 150px;"  >
              <el-option v-for="item in status" :key="item.value"  :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item prop="total_number" label="数量:" required>
            <el-input v-model="formData.total_number" disabled  style="width: 140px;" />
          </el-form-item>
          <el-form-item prop="total_amount" label="金额:" required>
            <el-input v-model="formData.total_amount" disabled  style="width: 140px;"  />
          </el-form-item>
          <el-form-item >
            <el-button type="primary" @click="handleCreateOrUpdate" :loading="loading">提交采购单</el-button>
          </el-form-item>

        </div>
      </el-form>
    </el-card>

  </div>
</template>

<style lang="scss" scoped>
.search-wrapper {
  margin-bottom: 10px;

  :deep(.el-card__body) {
    padding-bottom: 2px;
  }

  :deep(.el-form-item) {
    display: inline-flex;
    margin-right: 22px;
    vertical-align: middle;
  }
}



.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.table-wrapper {
  margin-bottom: 20px;
}

.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}
</style>
